<!-- 客户列表 -->
<template>
    <div class="cus-list">
        <div ref="dgtools" class="filter-container">
            <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
                <el-form-item>
                    <el-input style="width: 200px" placeholder="联系人/电话（支持模糊查询）" v-model="dg.ps.find">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 140px" placeholder="用车单位名称" v-model="dg.ps.unitName">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 140px" placeholder="业务员" v-model="dg.ps.serviceMan">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 140px" placeholder="推荐人" v-model="dg.ps.recomMan">
                    </el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
                <el-button type="primary" icon="el-icon-user" @click="setAddBLMd({ state: true })">操作员</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="setAddCusMd({ state: true })">新增</el-button>
                <el-button type="primary" icon="el-icon-edit-outline" @click="setUpdCusMd({ state: true })">修改</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="delCompanyCus">删除</el-button>
                <!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="createCarTeam">创建车队</el-button> -->
            </el-form>

            <TableSelfSet v-if="dg.columns.length > 0" :tbTitle="'客户列表'" :dgName="dg.dgName" :tbId="dg.tbName"
                :srcCols="dg.srcCols" :columns="dg.columns" @saveSet="saveTbSet" />
        </div>
        <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight" border fit
            :row-class-name="rowClassName" @header-dragend="dragHeader" @selection-change="selRowChange"
            @expand-change="saveRowExpand">
            <el-table-column fixed="left" type="selection" width="40"></el-table-column>
            <!-- <el-table-column fixed="left" type="expand" label="详情" width="60">
                <template slot-scope="{row}">
                <el-form label-position="left" inline class="my-table-expand">
                    <el-form-item label="单位名称">
                        <span>{{ row.unitName }}</span>
                    </el-form-item>

                    <el-form-item label="日期">
                        <span>{{ row.addTime }}</span>
                    </el-form-item>

                    <el-form-item label="姓名">
                        <span>{{ row.baseUserId.realName }}</span>
                    </el-form-item>
                </el-form>
                </template>
            </el-table-column> -->

            <!-- <fragment v-for="col in dg.columns" :key="col.field">
                <el-table-column 
                    :class-name="dg.dgName"
                    :prop="col.field"
                    :label="col.label"
                    :width="col.width"
                ></el-table-column>
            </fragment> -->

            <el-table-column v-for="(col, index) in dg.columns" :key="index" :class-name="dg.dgName" :prop="col.field"
                :label="col.label" :width="col.width">
                <template slot-scope="{row}">
                    <template v-if="col.field == 'agreeOnPayDay'">
                        <span>每月{{ row.agreeOnPayDay }}号</span>
                    </template>
                    <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>


            </el-table-column>
        </el-table>
        <Pagination v-show="dg.total > 0" :total="dg.total" :page.sync="dg.ps.page" :limit.sync="dg.ps.rows"
            @pagination="getDgList" />

        <AddBusinessLeader v-if="addBLMd.state" :myData="addBLMd" @myClick="setAddBLMd" />

        <AddCus v-if="addCusMd.state" @myClick="setAddCusMd" @reloadDg="getDgList" />

        <UpdCus v-if="updCusMd.state" :myData="updCusMd" @myClick="setUpdCusMd" @reloadDg="getDgList" />

    </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';

import SvgIcon from '@/components/SvgIcon';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';
import AddBusinessLeader from '../add-business-leader';
import AddCus from '../add-cus';
import UpdCus from '../upd-cus';

import * as cusService from '@/api/services/cus.service';
import * as commService from '@/api/services/common.service';

export default {
    name: 'CusList',
    mixins: [DataGridBase, DataGridResize],
    directives: { elDragDialog },
    components: { SvgIcon, TableSelfSet, Pagination, AddBusinessLeader, AddCus, UpdCus },
    data() {
        let cols = [
            { label: '用车单位', field: 'unitName', width: 220 },
            { label: '联系人', field: 'baseUserId.realName', width: 130 },
            { label: '电话', field: 'baseUserId.phone', width: 110 },
            { label: '公司类型', field: 'cusTypeId.typeName', width: 80 },
            { label: '业务员', field: 'serviceManName', width: 180 },
            { label: '推荐人', field: 'recomManName', width: 180 },
            { label: '约定付款时间', field: 'agreeOnPayDay', width: 180 },
            { label: '添加时间', field: 'addTime', width: 160 },
        ];

        return {
            dg: {// 数据列表参数
                dgName: 'dg',
                tbName: 'cusListTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                rowExpands: [],
                ps: { // 过滤参数
                    page: 1, rows: 20,
                    find: '',
                    unitName: '',
                    serviceMan: '',
                    recomMan: '',
                    uname: ''
                },
            },
            // 添加业务负责人-弹框
            addBLMd: { state: false },
            // 添加客户-弹框
            addCusMd: { state: false },
            // 修改客户-弹框
            updCusMd: { state: false },
        }
    },
    created() {
        const that = this;

        that.initTbSetData(that.dg.dgName);

        that.getDgList();
    },
    methods: {
        /** 获取-单位客户分页列表 */
        getDgList() {
            const that = this;

            let loading = that.U.qloading('数据请求中...');
            cusService.getCompanyCusPageList(that.dg.ps).then(res => {
                that.U.qclose(loading);

                if (res && res.code == 1) {
                    let list = res.data;

                    for (let i in list) {
                        list[i].dgName = that.dg.dgName;
                        list[i].serviceManName = list[i].serviceMan.split("-")[0];
                        list[i].recomManName = list[i].recomMan.split("-")[0];
                    }

                    that.dg.list = list;
                    that.dg.total = res.count;
                }
            }).catch(() => { that.U.qclose(loading); });
        },
        /** 打开/关闭-添加业务负责人-弹框 */
        setAddBLMd(e) {
            const that = this, rows = that.dg.selRows;

            if (e.state) {// 打开-弹框
                if (rows.length !== 1) {
                    that.U.qerror('请选择一条数据');
                } else {
                    let row = rows[0];
                    that.addBLMd = { state: true, uname: row.baseUserId.uname };
                }
            } else {// 关闭-弹框
                that.addBLMd.state = false;
            }
        },
        /** 打开/关闭-添加客户-弹框 */
        setAddCusMd(e) {
            this.addCusMd = e;
        },
        /** 打开/关闭-修改客户-弹框 */
        setUpdCusMd(e) {
            const that = this, rows = that.dg.selRows;

            if (e.state) {// 打开-弹框
                if (rows.length !== 1) {
                    that.U.qerror('请选择一条数据');
                } else {
                    let row = rows[0];
                    that.updCusMd = { state: true, obj: row }
                }
            } else {// 关闭-弹框
                that.updCusMd.state = false;
            }
        },
        /** 删除-单位客户 */
        delCompanyCus() {
            const that = this, U = that.U, rows = that.dg.selRows;

            if (rows.length !== 1) {
                U.qerror('请选择一条数据');
            } else {
                let row = rows[0];
                U.qconfim(`确认删除客户【${row.baseUserId.realName}-${row.baseUserId.phone}】吗？`).then(r => {
                    if (r) {
                        let loading = U.qloading('删除中...');
                        cusService.delCompanyCus({ id: row.id }).then(res => {
                            U.qclose(loading);

                            if (res.code !== 1) {
                                U.qerror(res.msg);
                            } else {
                                U.qsuccess(res.msg);

                                // 删除一行
                                that.dg.list.splice(row.index, 1);
                            }
                        });
                    }
                });
            }
        },
        /** 创建车队 */
        createCarTeam() {
            const that = this, U = that.U, rows = that.dg.selRows;

            if (rows.length !== 1) {
                U.qerror('请选择一条数据');
            } else {
                let row = rows[0];

                let ps = { customId: row.id, canLogin: row.loginTeam == 1 ? 0 : 1 };
                U.qconfim(`确认为客户【${row.baseUserId.realName}】<span class="c-red">${ps.canLogin == 1 ? '创建' : '取消'}</span>车队吗？`).then(r => {
                    if (r) {
                        let loading = U.qloading('创建中...');
                        cusService.createCarTeam(ps).then(res => {
                            U.qclose(loading);

                            if (res.code !== 1) {
                                U.qerror(res.msg);
                            } else {
                                U.qsuccess(res.msg);
                            }
                        });
                    }
                });
            }

        },
    },
}
</script>

<style scoped>
</style>
